<template>
  <div class="navigation-bar">
    <div id="navigator_top">
      <div class="navigator-top-buttons-container">
        <button type="button" class="navigator-top-button" @click="jumpHome">首页</button>
        <!-- <div v-if="searchHidden == 0">
          <button type="button" class="navigator-top-button" @click="search">搜索</button>
          <input class="search-input" placeholder="在主页面中搜索" type="text" v-model="keywords" @keyup.enter="search"/>
        </div> -->

      </div>
      <div class="avatar-container">
        <img id="userAvatar" v-bind:src="userAvatar" alt="用户头像" @click="toUserpage()"/>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';

export default {
  name: 'NavigationBar',
  data() {
    return {
      originData: [],
      data: [], // require('@/assets/' + 'preview.json')
      // userLink: '', // to-do 用户详情页链接
      userAvatar: '',
      keywords: ''
    }
  },
  methods: {
    search() {
      // 根据keywords执行搜索程序
      if(/\S/.test(this.keywords)){
        let reg = new RegExp(this.keywords.trim().replace(/\s+/g, '|'), 'i')
        console.log('before:')
        console.log(this.originData)
        this.data = JSON.parse(JSON.stringify(this.originData.filter((item) => {
          return reg.test(item.pdec)
        })))
        for(let i = 0; i < this.data.length; ++i) {
          this.data[i].pdec = this.hightLight(this.data[i].pdec)
        }
        console.log('after:')
        console.log(this.originData)
      }
    },
    toUserpage() {
      if(this.globalData.User.Id === -1){
        // 跳转到登录页
        this.$router.push({name: 'Connect'})
      } else {
        /* to-do 跳转到用户详情页 */
        this.$router.push({name: 'UserInfo'})
        console.log('pretend to jump to link xxx')
      }
    },
    jumpHome() {
      this.$router.push({name: 'Home'})
    }
  },
  beforeMount() {
    if(localStorage.getItem('UserJSON') !== null){
      console.log('autoload success', localStorage.getItem('UserJSON'))
      this.globalData.User = JSON.parse(localStorage.getItem('UserJSON'))
    }
    if(this.globalData.User.Id === -1) {
      console.log('autoload', 'needLogin')
      // 未登录时
      this.userAvatar = require('@/assets/' + 'no-login.jpg')
    } else if(this.globalData.User.User_pic === '') {
      // 未设置头像时
      this.userAvatar = require('@/assets/' + 'no-avatar.jpg')
    } else {
      this.userAvatar = this.globalData.User.User_pic
    }
  }
}
</script>

<style>
/* 顶部导航栏 */
#navigator_top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    background-image: linear-gradient(to bottom, #2c7dbdb0, #2c7dbd70);
    /*background-color: rgb(92, 173, 213, 0.8);*/
    z-index: 100;
}

.avatar-container {
  width: 50px;
  height: 50px;
  float: right;
  margin-right: 15px;
  border-radius: 25px; /* 令头像图片呈圆形 */
  overflow: hidden;
}

/* 外部用户头像 */
#userAvatar {
  margin:0;
  padding: 0;
  object-fit: cover; /* 令图片居中展示 */
  width: 50px;
}

.content {
    display: flex;
    flex-wrap: wrap;    /* 令子元素居中 */
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 20px; /* 确保内容不被导航栏遮挡 */
}

.navigator-top-buttons-container {
  float: left;
  width: 50%;
  height: 100%;
  margin: auto;
  text-align: left;
}

.navigator-top-button {
  display: inline;
  left: 30px;
  width: 60px;
  height: 40px;
  position: relative;
  top: 5px;
  background-color: rgba(4, 6, 92, 0.714);
  color: aliceblue;
}

.search-input {
  display: inline;
  position: absolute;
  top: 15px;
  left: 220px;
}
</style>
